<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <!-- 列表 -->
          <pro-table
            :fetch="fetch"
            :columns="columns"
            :toolbar="toolbar"
            :param="state.param"
            :pagination="pagination"
            :operate="operate"
            :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
          >
            <!-- 继承至 a-table 的默认插槽 -->
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
  </page-layout>
</template>
<script>
import { reactive } from 'vue';

export default {
  setup() {
    /// 列配置
    const columns = [
      { dataIndex: "fbgcmc", key: "fbgcmc", title: "分部工程名称" },
      { dataIndex: "kcdw", key: "kcdw", title: "勘测单位" },
      { dataIndex: "sjdw", key: "sjdw", title: "设计单位" },
      { dataIndex: "jldw", key: "jldw", title: "监理单位"},
      { dataIndex: "sgdw", key: "sgdw", title: "施工单位"},
      { dataIndex: "sbshang", key: "sbshang", title: "主要设备制造/供应商"},
      { dataIndex: "yxgldw", key: "yxgldw", title: "运行管理单位"},
      { dataIndex: "zljdjg", key: "zljdjg", title: "质量监督机构"},
      { dataIndex: "yssj", key: "yssj", title: "验收时间"},
      { dataIndex: "yszl", key: "yszl", title: "验收资料"},
    ]

    /// 操作列内容
    const operate = [
      { label: "查看", event: function (record) { state.visibleInfo = true, state.recordInfo = record }},
    ]

    /// 数据来源 [模拟]
    const fetch = async (param) => {
      //var response = await page(param);
      let data = [{
        "id": "1",
        "fbgcmc": "广西落久水利枢纽工程分部工程验收1",
        "kcdw": "中国1勘测设计有限公司",
        "sjdw": "区区设计院",
        "jldw": "新的工程监理有限责任公司",
        "sgdw": "大力奇迹建设工程有限公司",
        "sbshang": "华强水利机械有限公司",
        "yxgldw": "柳州市龙溪水利水电建设投资有限公司",
        "zljdjg": "新工程监督有限公司",
        "yssj": "2019-12-31",
        "yszl": "广西落久水利枢纽工程分部工程验收1资料",
      }, {
        "id": "2",
        "fbgcmc": "广西落久水利枢纽工程分部工程验收2",
        "kcdw": "中国1勘测设计有限公司",
        "sjdw": "区区设计院",
        "jldw": "新的工程监理有限责任公司",
        "sgdw": "大力奇迹建设工程有限公司",
        "sbshang": "华强水利机械有限公司",
        "yxgldw": "柳州市龙溪水利水电建设投资有限公司",
        "zljdjg": "新工程监督有限公司",
        "yssj": "2019-12-31",
        "yszl": "广西落久水利枢纽工程分部工程验收2资料",
      }, {
        "id": "3",
        "fbgcmc": "广西落久水利枢纽工程分部工程验收3",
        "kcdw": "中国1勘测设计有限公司",
        "sjdw": "区区设计院",
        "jldw": "新的工程监理有限责任公司",
        "sgdw": "大力奇迹建设工程有限公司",
        "sbshang": "华强水利机械有限公司",
        "yxgldw": "柳州市龙溪水利水电建设投资有限公司",
        "zljdjg": "新工程监督有限公司",
        "yssj": "2019-12-31",
        "yszl": "广西落久水利枢纽工程分部工程验收3资料",
      }]
      return {
        total: data.length,
        data: data,
      }
    }

    /// 分页参数
    const pagination = {
      pageNum: 1,
      pageSize: 10,
    }

    /// 工具栏
    const toolbar = [
      { label: "新增", event: function () { state.visibleSave = true }},
    ];

    /// 外置参数 - 当参数改变时, 重新触发 fetch 函数
    const state = reactive({
      selectedRowKeys: [],
      param: {},
      visibleInfo: false,
      recordInfo: {},
    })

    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const closeInfo = function(){
      state.visibleInfo = false
    }

    return {
      state,
      fetch,
      toolbar,
      columns,
      operate,
      pagination,

      closeInfo,
      onSelectChange,
    };
  }
}
</script>
